<link rel="stylesheet" href="./css/honeHeader.css">
<link rel="stylesheet" href="./css/home.css">
<script src="public/js/swiper.js"></script>
<!-- header -->
<div class="navbar navbar-fixed-top header">
    <img src="./images/weather.png" class="weather" alt="">
    <div class="area">
        <span class="area-detail">太原</span>
        <img src="./images/trigon.png" alt="" class="area-trigon">
    </div>
    <div class="search-box">
        <i class="search-icon"></i>
        <input type="text" class="search-input" placeholder="请输入搜索内容">
    </div>
    <img src="./images/message.png" class="message" alt="">
</div>
<!-- banner -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" interval=1000 wrap="true">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic"  ng-repeat="item in bannerList" data-slide-to="{{$index}}" ng-class="{'active':$index==0}"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item" ng-class="{'active':$index==0}"  ng-repeat="item in bannerList">
            <img class="banner"  ng-src="{{item.img}}" alt="">
        </div>
    </div>
</div>
<!-- 分类 -->
<div class="category">
    <ul class="transverse">
       <li>
           <img src="./images/friends.png" alt="">
           <span>朋友</span>
       </li>
       <li>
           <img src="./images/video.png" alt="">
           <span>家庭视频</span>
       </li>
       <li>
           <img src="./images/familyjk.png" alt="">
           <span>家人健康</span>
       </li>
       <li>
           <img src="./images/to-home.png" alt="">
           <span>到家服务</span>
       </li>
       <li>
           <img src="./images/greens.png" alt="">
           <span>生鲜果蔬</span>
       </li>
    </ul>
    <ul class="transverse">
        <li>
            <img src="./images/mall.png" alt="">
            <span>商城</span>
        </li>
        <li>
            <img src="./images/tourism.png" alt="">
            <span>旅游服务</span>
        </li>
        <li>
            <img src="./images/huddle.png" alt="">
            <span>抱团养老</span>
        </li>
        <li>
            <img src="./images/country.png" alt="">
            <span>他乡</span>
        </li>
        <li>
            <img src="./images/integral.png" alt="">
            <span>积分直通车</span>
        </li>
    </ul>

</div>
<!-- 活动 -->
<div class="activity">
    <div class="activity-top">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <div class="yhzq">
                    <img src="./images/yhzq.png" alt="">
                    <i class="tip"></i>
                </div>
            </div>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" style="margin-left: -5px">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div class="activity-model activity-row-top">
                        <img src="./images/otherCountry.png" alt="">
                        <i class="tip">她/他乡荷兰1</i>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div class="activity-model activity-row-top">
                        <img src="./images/compound.png" alt="">
                        <i class="tip">机构大院</i>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div class="activity-model">
                        <img src="./images/tohome.png" alt="">
                        <i class="tip">到家服务，深切关怀</i>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div class="activity-model">
                        <img src="./images/always.png" alt="">
                        <i class="tip">其实我一直都在</i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="activity-bottom">
        <ul class="swiper-container">
            <li class="swiper-slide" ng-repeat="item in activity">
                <img src="{{item.imgSrc}}" alt="">
                <i class="activity-tip {{item.tips}}">{{item.name}}</i>
            </li>
        </ul>
    </div>
</div>
<!-- 商品 -->
<div class="shop">
    <div class="row titles">
        <div class="col-xs-4 first-title" ng-class="{'cur':medicalCare}" ng-click="changeGoods('medicalCare')"><span>医疗</span></div>
        <div class="col-xs-4 first-title" ng-class="{'cur':intelligent}" ng-click="changeGoods('intelligent')"><span>智能</span></div>
        <div class="col-xs-4 first-title" ng-class="{'cur':health}" ng-click="changeGoods('health')"><span>健康</span></div>
    </div>
    <div class="row">
        <div class="col-xs-3 subtitle" ng-class="{'now':colligate}" ng-click="changeGoodsState('colligate')">综合</div>
        <div class="col-xs-3 subtitle" ng-class="{'now':salesVolume}" ng-click="changeGoodsState('salesVolume')">销量</div>
        <div class="col-xs-3 subtitle" ng-class="{'now':evaluation}" ng-click="changeGoodsState('evaluation')">好评优先</div>
        <div class="col-xs-3 subtitle" ng-class="{'now':distance}" ng-click="changeGoodsState('distance')">距离优先</div>
    </div>
    <div class="row goods medicalCare" ng-show="medicalCare">
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>医疗电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
    </div>
    <div class="row goods intelligent" ng-show="intelligent">
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>智能电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
    </div>
    <div class="row goods health" ng-show="health">
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>健康电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
        <div class="col-xs-6">
            <div class="goods_img">
                <img src="./images/goods_01.png" class="img-responsive" alt="">
            </div>
            <h4 class="title"><em>电动护理沙发</em><span class="price">￥3380</span></h4>
            <p class="smallTitle">月销2015笔<span>270米</span></p>
        </div>
    </div>
</div>
<script src="./public/js/swiper.js"></script>
<script>
    var el = $('#carousel-example-generic');
    el.carousel();
    el.swipeLeft(function () {
        el.carousel('prev');
    });
    el.swipeRight(function () {
        el.carousel('next');
    });

</script>